<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>豪豪商城后台管理系统</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/e3.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/default.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<style type="text/css">
	.content {
		padding: 10px 10px 10px 10px;
	}
</style>
</head>
<body class="easyui-layout">
    <!-- 头部标题 -->
	<div data-options="region:'north',border:false" style="height:60px; padding:5px; background:#F3F3F3"> 
		<span class="northTitle">豪豪商城后台管理系统</span>
	    <span class="loginInfo">登录用户：admin&nbsp;&nbsp;姓名：管理员&nbsp;&nbsp;角色：系统管理员</span>
	</div>
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
    	<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
         	<li>
         		<span>权限管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'login'}">登录界面</li>
	         	</ul>
         	</li>
         	<li>
         		<span>商品管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'item-add'}">新增商品</li>
	         		<li data-options="attributes:{'url':'item-list'}">查询商品</li>
	         		<li data-options="attributes:{'url':'item-param-list'}">规格参数</li>
	         	</ul>
         	</li>
         	<li>
         		<span>网站内容管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'content-category'}">内容分类管理</li>
	         		<li data-options="attributes:{'url':'content'}">内容管理</li>
	         	</ul>
         	</li>
         	<li>
         		<span>索引库管理</span>
         		<ul>
	         		<li data-options="attributes:{'url':'index-item'}">solr索引库维护</li>
	         	</ul>
         	</li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
    	<div id="tabs" class="easyui-tabs">
		    <div id="chartmain" title="首页" style="text-align:center; height: 600px;width: 80%;">
		        
		    </div>
		</div>
    </div>
    <!-- 页脚信息 -->
	<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
		<span id="sysVersion">系统版本：V1.0</span>
	    <span id="nowTime"></span>
	</div>
<script type="text/javascript">
$(function(){
	$('#menu').tree({
		onClick: function(node){
			if($('#menu').tree("isLeaf",node.target)){
				var tabs = $("#tabs");
				var tab = tabs.tabs("getTab",node.text);
				if(tab){
					tabs.tabs("select",node.text);
				}else{
					tabs.tabs('add',{
					    title:node.text,
					    href: node.attributes.url,
					    closable:true,
					    bodyCls:"content"
					});
				}
			}
		}
	});
});
setInterval("document.getElementById('nowTime').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);

</script>
<script type="text/javascript">
//指定图标的配置和数据
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));

        // 指定图表的配置项和数据
        var option = {
        	    tooltip: {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b}: {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        x: 'left',
        	        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
        	    },
        	    series: [
        	        {
        	            name:'访问来源',
        	            type:'pie',
        	            selectedMode: 'single',
        	            radius: [0, '30%'],

        	            label: {
        	                normal: {
        	                    position: 'inner'
        	                }
        	            },
        	            labelLine: {
        	                normal: {
        	                    show: false
        	                }
        	            },
        	            data:[
        	                {value:335, name:'直达', selected:true},
        	                {value:679, name:'营销广告'},
        	                {value:1548, name:'搜索引擎'}
        	            ]
        	        },
        	        {
        	            name:'访问来源',
        	            type:'pie',
        	            radius: ['40%', '55%'],
        	            label: {
        	                normal: {
        	                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        	                    backgroundColor: '#eee',
        	                    borderColor: '#aaa',
        	                    borderWidth: 1,
        	                    borderRadius: 4,
        	                    // shadowBlur:3,
        	                    // shadowOffsetX: 2,
        	                    // shadowOffsetY: 2,
        	                    // shadowColor: '#999',
        	                    // padding: [0, 7],
        	                    rich: {
        	                        a: {
        	                            color: '#999',
        	                            lineHeight: 22,
        	                            align: 'center'
        	                        },
        	                        // abg: {
        	                        //     backgroundColor: '#333',
        	                        //     width: '100%',
        	                        //     align: 'right',
        	                        //     height: 22,
        	                        //     borderRadius: [4, 4, 0, 0]
        	                        // },
        	                        hr: {
        	                            borderColor: '#aaa',
        	                            width: '100%',
        	                            borderWidth: 0.5,
        	                            height: 0
        	                        },
        	                        b: {
        	                            fontSize: 16,
        	                            lineHeight: 33
        	                        },
        	                        per: {
        	                            color: '#eee',
        	                            backgroundColor: '#334455',
        	                            padding: [2, 4],
        	                            borderRadius: 2
        	                        }
        	                    }
        	                }
        	            },
        	            data:[
        	                {value:335, name:'直达'},
        	                {value:310, name:'邮件营销'},
        	                {value:234, name:'联盟广告'},
        	                {value:135, name:'视频广告'},
        	                {value:1048, name:'百度'},
        	                {value:251, name:'谷歌'},
        	                {value:147, name:'必应'},
        	                {value:102, name:'其他'}
        	            ]
        	        }
        	    ]
        	};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
</body>
</html>